<script setup>
  import axios from "axios";
  import {ref} from "vue"


  const verifyCode = ref("")

  // 用于请求图片
  const url = ref("https://127.0.0.1:8443/home/captcha")

  // 全局配置，允许携带cookie
  axios.defaults.withCredentials = true
  // 创建请求实例
  const instance = axios.create({
    baseURL: "https://127.0.0.1:8443/api",
    timeout: 5000,
    withCredentials: true 
  })

  // 提交验证码
  const onsubmit = () => {
    // 判空
    if(!verifyCode.value) {
      return alert("验证码不能为空")
    }
    // 发送请求
    instance({
      url: "/captcha/check",
      method: "post",
      data: {
        verifyCode: verifyCode.value
      }
    })
  }
</script>

<template>
  <div>
    <span>输入验证码：</span>
    <input type="text" v-model="verifyCode">
    <button @click="onsubmit">提交</button>
    <img :src="url" alt="">
  </div>
</template>

<style scoped>

</style>